<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
    <style>
        [v-cloak] {
            display: none;
        }
    </style>
</head>

<body>

    <div id="app">
        <!-- 内置指令 -->
        <!-- 01-v-cloak -->
        <!-- <p v-cloak>{{msg}}</p> -->
        <!--02： v-text 相当于原生 innerText -->
        <!-- <p v-text="msg"></p>
        <p v-text="link"></p> -->
        <!-- 03:v-html -->
        <!-- <p v-html="link"></p>
        <p>{{link}}</p>
        <p v-html="link1"></p>
        <p v-html="link2"></p> -->

        <!-- 04: -->
        <!-- <p>{{msg}}</p>
        <p v-text="msg"></p>
        <p v-html="msg"></p> -->

        <!-- 05-v-once -->
        <!-- <p>{{msg}}</p> -->

        <!-- 06 v-pre -->
        <!-- <p v-pre>{{msg}}</p> -->
    </div>

</body>

</html>
<script>
    // 内置指令:  (重点:)
    // vue 源码中定义一些内置的指令, 语法 以 v-开头 后面指令名称
    // 语法: v-指令名 实现对应的功能(也被称作为vue中的语法糖)
    // vue3中的内置指令有15个
    // 指令使用时, 按照自定义属性使用就可以啦

    // v-cloak (了解): 有时效性, 当组件实例创建完, 并完成数据初始化, 则该指令自动消失, 
    // 一般配合 css 使用, 实现不显示插值表达式模板的效果,提升用户体验

    // v-text
    // 将值赋值给标签中间内容, 相当于 innerText, 
    // 注意: 只能赋值文本

    // v-html
    // 相当于 innerHTML 
    // 注意: 可以解析文本中的标签内容
    // 缺点:  容易造成xss 跨站脚本攻击(网络安全的问题)
    // 一般解决方式2种: 前端解决 或后端解决   (前端+后端都做处理居多)
    // 使用正则表达式 将一些事件或a标签过滤掉
    // 在后端获取到数据后, 后端过滤敏感字符


    // 面试题:
    // 请说出 插值表示式 和 v-text 以及 v-html 区别?
    // 共同点: 都可以在标签之前解析模板数据
    // 不同点:
    // 01:  v-text 和 插值表达式只能解析文本,.不能解析标签
    // 02: 插值表达式有闪现的问题 而指令 v-text 和v-html 没有该问题

    // v-once: 初始化只渲染一次,当绑定该指令的dom 上的数据更新时, dom 不再重新渲染
    // 该指令了解(不重要)


    // v-pre 指令
    // 不渲染该指令绑定的标签模板



    // setTimeout(() => {
    const { createApp } = Vue;
    const app = createApp({
        data() {
            return {
                msg: '功夫',
                link: '<a href="https://www.baidu.com">百度一下,你就知道</a>',
                link1: '<a href="https://jingdong.com">如何榜上北京富婆</a>',
                link2: '<span onclick="console.log(document.cookie) ">农村小伙如何一夜暴富</span>',
            }
        }
    }).mount('#app')
    // }, 1000)




</script>